import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { Delete, Search } from "@element-plus/icons-vue";
import { defineComponent, onMounted, reactive, ref } from "vue";
import LiPieChart from "../../../../components/LiPieChart/index";
import LiTable from "../../components/LiTable";

/* 类型 */
declare type EChartOption = {
  title: string;
  data: {
    value: number;
    name: string;
  }[];
};

declare type PaymentMethod = {
  name: string;
  value: number;
  money: number;
  percentage: string;
};

export default defineComponent({
  name: "SettlementAnalysis",
  setup(props): () => JSX.Element {
    /* 数据 */
    let param = ref<{ dataTimeRange: string[]; reportId: number }>({
      dataTimeRange: [formatDate(-6, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      reportId: 114
    });

    let dataReport = ref<PaymentMethod[]>([]);

    let option = reactive<EChartOption>({
      title: "结算方式",
      data: []
    });

    /* 生命周期 */
    onMounted(async function (): Promise<void> {
      GetPageData();
    });

    /* 方法 */
    const GetPageData: () => void = async function () {
      option.data = dataReport.value = ((await getPageReport(param.value)).data as any).list as any[];
    };

    const search: () => void = async () => {
      GetPageData();
    };

    const reset: () => void = async function () {
      (param.value.dataTimeRange = [formatDate(-7, "start", "yyyy-MM-dd"), formatDate(-1, "end", "yyyy-MM-dd")]), GetPageData();
    };

    return () => (
      <div class="recharge-consume-container">
        <div style="margin-bottom: 10px" class="card table-box">
          <el-form inline={true} model={param} style="padding-top: 10px; margin-bottom: -10px">
            <el-form-item label=" 日期：">
              <el-date-picker
                v-model={param.value.dataTimeRange}
                type="daterange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                date-format="YYYY/MM/DD"
                clearable={false}
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon={Search} onClick={search}>
                搜索
              </el-button>
              <el-button icon={Delete} onClick={reset}>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <div style="display: flex; justify-content: space-between; height: 500px; margin-top: 10px">
          <el-card style="width: 49.5%; height: 500px">
            <LiPieChart title={option.title} data={option.data} height={480} />
          </el-card>
          <el-card style="width: 49.5%; height: 500px">
            <LiTable
              data={dataReport.value}
              columns={[
                {
                  sortable: true,
                  prop: `name`,
                  label: `结算方式`
                },
                {
                  sortable: true,
                  prop: `value`,
                  label: `笔数`
                },
                {
                  sortable: true,
                  prop: `money`,
                  label: `应收金额`
                },
                {
                  sortable: true,
                  prop: `percentage`,
                  label: `金额占比`
                }
              ]}
              maxHeight={480}
            />
          </el-card>
        </div>
      </div>
    );
  }
});
